<template>
  <div class="search">
    <form action="/" class="top">
      <van-search
        v-model="value"
        show-action
        placeholder="输入影城名称"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="box-search">
      <ul v-if="value">
          <li v-for="cinema in computeList" :key="cinema.cinemaId">
            <div class="left">
              <div class="cinema_name overflow">{{ cinema.name }}</div>
              <div class="cinema_address overflow">{{ cinema.address }}</div>
            </div>
            <div class="right">
              <div class="cinema_lowprice">￥{{ cinema.lowPrice | lowPrice }}起</div>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Toast } from 'vant';
import {mapActions,mapState} from 'vuex'
import obj from '@/util/mixin0bj'

Vue.filter('lowPrice', (data) => {
  return Math.ceil(data / 100)
})
export default {
  mixins:[obj],  // 混入
  data() {
    return {
      value: '',
      height: '0px'
    };
  },
  computed:{
    ...mapState(['cinemaList']),
    computeList(){
      return this.cinemaList.filter(item=>item.name.toUpperCase().includes(this.value.toUpperCase()) || item.address.toUpperCase().includes(this.value.toUpperCase()) || item.name.includes(this.value) || item.address.includes(this.value))
    }
  },
  methods: {
    ...mapActions(['getCinemaList']),
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.back();
    },
  },
  mounted(){
    if(this.cinemaList.length === 0){
      this.getCinemaList()
    }
  }
}
</script>
<style lang="scss" scoped>
.top{
  width: 100vw;
  position: fixed;
  top: 0;
}
.box-search{
  margin-top: 6.75rem;
}
li{
  padding: 1.875rem;
  display: flex;
  justify-content: space-between;
  .left{
    width: 30rem;
  };
  .cinema_name{
    font-size: 1.8rem;
  };
  .cinema_address{
    margin-top: .3125rem;
    font-size: 1.6rem;
    color: #797d82
  };
  .cinema_lowprice{
    color: red;
  }
  .overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>